<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('结算工资')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
<div class="main-content">
    <form class="form-horizontal m" id="form-wage-add" th:object="${workstudyAttendanceset}">
        <div class="col-md-12">
            <div class="form-group">
                <label class="col-sm-4 control-label is-required">学生：</label>
                <div class="col-sm-4">
                    <select name="userId" id="userId" class="form-control m-b" required>
                        <option value="">请选择学生</option>
                        <option th:each="user:${students}" th:value="${user.userId}" th:text="${user.userName}+'('+${user.loginName}+')'" th:disabled="${user.status == '1'}" required></option>
                    </select>
                </div>
            </div>
        </div>
        <input name="attendanceIds" id="attendanceIds" type="hidden" required>
    </form>
    <h4 class="form-header h4">选择考勤信息</h4>
    <div class="row">
        <div class="col-sm-12">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                    <tr class="success">
                        <th style="text-align: center"><input type="checkbox" onclick="selectAll(this.checked)" /></th>
                        <th>学生</th>
                        <th>岗位</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>工作时长</th>
                        <th>结算工资(元)</th>
                        <th>岗位每小时工资(元)</th>
                        <th>状态</th>
                        <th>工作质量(%)</th>
                        <th>考勤人</th>
                        <th>考勤时间</th>
                    </tr>
                    </thead>
                    <tbody id="tabletr">

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
    <h4 class="form-header h4">提交</h4>
    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>结 算</button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        //单选
        $(function () {
            //除了表头（第一行）以外所有的行添加click事件.
            $("tr").slice(1).click(function () {
                // 切换样式
                $(this).toggleClass("tr_active");
                // 找到checkbox对象
                var chks = $("input[type='checkbox']",this);
                var tag = $(this).attr("tag");
                if(tag=="selected"){
                    // 之前已选中，设置为未选中
                    $(this).attr("tag","");
                    chks.prop("checked",false);
                }else{
                    // 之前未选中，设置为选中
                    $(this).attr("tag","selected");
                    chks.prop("checked",true);
                }
            });
        });
        //全选
        function selectAll(selectStatus){//传入参数（全选框的选中状态）
            //根据name属性获取到单选框的input，使用each方法循环设置所有单选框的选中状态
            if(selectStatus){
                $("input[name='check']").each(function(i,n){
                    n.checked = true;
                });
            }else{
                $("input[name='check']").each(function(i,n){
                    n.checked = false;
                });
            }
        }

        $("#userId").change(function(){
            $.ajax({
                url: ctx + "workstudy/attendance/getAttendanceUserIdlist",
                data: {userId: $(this).val()},
                type: "get",
                dataType: "json",
                success: function(data) {
                    $("#tabletr").empty();
                    data.forEach(d=>{
                        console.log(d.userId)
                        $("#tabletr").append("<tr>\n" +
                            "                        <td style=\"text-align: center\"><input type=\"checkbox\" name=\"check\" value="+d.attendanceId+"></td>\n" +
                            "                        <td>"+d.userName+"</td>\n" +
                            "                        <td>"+d.postName+"</td>\n" +
                            "                        <td>"+d.startTime+"</td>\n" +
                            "                        <td>"+d.endTime+"</td>\n" +
                            "                        <td>"+d.duration+"</td>\n" +
                            "                        <td>"+d.price+"</td>\n" +
                            "                        <td>"+d.pprice+"</td>\n" +
                            "                        <td>未结算</td>\n" +
                            "                        <td>"+d.quality+"</td>\n" +
                            "                        <td>"+d.attendanceBy+"</td>\n" +
                            "                        <td>"+d.attendanceTime+"</td>\n" +
                            "                    </tr>");
                    })
                }
            });
        });
        var prefix = ctx + "workstudy/wage"
        $("#form-wage-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            var box_value="";
            $("input[name='check']").each(function(){
                if(this.checked){
                    box_value+=this.value+",";
                }
            });
            $("#attendanceIds").val(box_value);
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-wage-add').serialize());
            }
        }

        $("input[name='settlementTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
    </script>
</body>
</html>